<template>
  <div class="discover-music">
    <ul class="title-list">
      <li class="item" :class='{active: i === activeIndex}' v-for='(item, i) in menu' :key='item.name' @click='changeActiveIndex(i)'>
        <router-link :to="{ name: item.name }">{{item.word}}</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
import Banner from "./Banner";
import RecommendSongLists from "./RecommendSongLists";
import Unique from "./Unique";
import LastestMusic from "./LastestMusic";
import RecommedMv from "./RecommendMv";
export default {
  name: "DiscoverMusic",
  data() {
    return {
      activeIndex: 0,
      menu: [
        {
          word: "个性推荐",
          name: "recommend",
        },
        {
          word: "歌单",
          name: "songList",
        },
        {
          word: "主播电台",
          name: "",
        },
        {
          word: "排行榜",
          name: "topList",
        },
        {
          word: "歌手",
          name: "singer",
        },
        {
          word: "最新音乐",
          name: "lastestMusic",
        },
      ],
    };
  },
  methods: {
    changeActiveIndex(i) {
      this.activeIndex = i;
    }
  },
  created() {
    this.$bus.$on('changeMenu', (newMenu) => {
      this.menu = newMenu
    })
  }
};
</script>

<style lang="scss" scoped>
.discover-music {
  padding: 0 2rem;
  .title-list {
    display: flex;
    height: 6rem;
    align-items: center;
    .item {
      position: relative;
      margin: 0 1rem;
      a {
        font-size: 1.9rem;
        color: inherit;
      }
    }
    .item:first-child {
      margin-left: 0;
    }
    .item.active {
      a {
        font-size: 2.5rem;
      }
      font-weight: bold;
    }
  }
}
</style>